import React, { Component, createRef } from "react";

// 非受控组件就是由react去控制的组件
// 引入createRef,将执行的结果绑定给元素

// 非受控组件的默认值要用defaultValue

class App extends Component {
  // createRef的执行结果是一个地址引用
  // ipt = createRef();
  // ipt2 = createRef();

  constructor() {
    super();
    this.ipt = createRef();
    this.ipt2 = createRef();
  }

  handleClick() {
    // this.ipt.current可以拿到dom元素
    console.log(this.ipt.current.value);
    console.log(this.ipt2.current.value);
  }

  render() {
    return (
      <>
        <h2>非受控组件</h2>
        <input type="text" ref={this.ipt} defaultValue="abc" />
        <input type="text" ref={this.ipt2} />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
